<template>
	<tm-fullView>
		<tm-menubars  title="级联拉选择器" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-24">单列基本示例,当前选中:{{ JSON.stringify(selected) }}</view>
			<tm-pickers @confirm="test" :default-value="selected" :list="['苹果', '香蕉', '可口可乐', '新西兰', '日本']"><tm-button>普通单列显示</tm-button></tm-pickers>
			<tm-pickers 
				black
				@confirm="test"
				:default-value="selected"
				rang-key="title"
				btn-color="bg-gradient-yellow-lighten"
				:list="[{ title: '苹果' }, { title: '香蕉' }, { title: '可口可乐' }, { title: '新西兰' }, { title: '日本' }]"
			>
				<tm-button black theme="bg-gradient-yellow-lighten">对象数据+暗黑</tm-button>
			</tm-pickers>
			<view class="text-size-s text-weight-b mb-24 ">多列示例,当前选中:{{ JSON.stringify(selected_1) }}</view>
			<tm-pickers  @change="testchange" :default-value="selected_1" @confirm="test_1" :list="list_1" rang-key="title" children-key="children" btn-color="bg-gradient-yellow-lighten">
				<tm-button theme="bg-gradient-yellow-lighten">显示多列</tm-button>
			</tm-pickers>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-24">日期选择({{ JSON.stringify(date) }})</view>
			<view class="flex-start">
				
				<tm-pickersDate v-model="showDate" :start="start_d" :end="end_d" :default-value="date" @confirm="dateSe_1" btn-color="bg-gradient-orange-accent">
					<tm-button size="m" theme="bg-gradient-orange-accent">年月日</tm-button>
				</tm-pickersDate>
				<tm-pickersDate :showDetail="{year: true,month: true,day: true,hour: true,min: true,sec: true }" :start="start_d" :end="end_d" :default-value="date"  btn-color="bg-gradient-orange-accent">
					<tm-button size="m" theme="bg-gradient-orange-accent">显示全部</tm-button>
				</tm-pickersDate>
				<tm-pickersDate start="2020-2-1" end="2022-2-1" :default-value="date"  btn-color="bg-gradient-orange-accent">
					<tm-button size="m" theme="bg-gradient-orange-accent">开始结束</tm-button>
				</tm-pickersDate>
				
			</view>	
			<tm-button @click="date='2012-5-10 14:24:12'" block>设置时间</tm-button>
			<view class="pa-24 text-size-n">具体看文档，每一个时间都可控，限制等。</view>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-24">地区选择({{ JSON.stringify(d_3) }})</view>
			<tm-pickersCity @confirm="dateSe_3" :default-value="d_3" btn-color="bg-gradient-pink-accent">
				<tm-button theme="bg-gradient-pink-accent">地区选择</tm-button>
			</tm-pickersCity>
		</tm-sheet>
		
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-24">单列嵌入基本示例,当前选中:{{ JSON.stringify(selected) }}</view>
			<tm-pickersView :default-value="selected" :list="['苹果', '香蕉', '可口可乐', '新西兰', '日本']"></tm-pickersView>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-24">日期嵌入基本示例</view>
			<tm-pickersDateView></tm-pickersDateView>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-24">地址嵌入基本示例</view>
			<tm-pickersCityView :default-value="['江西省', '南昌市', '青山湖区']"></tm-pickersCityView>
		</tm-sheet>
		<view style="height: 50upx;"></view>
	</tm-fullView>
</template>

<script>
import tmFullView from '@/tm-vuetify/components/tm-fullView/tm-fullView.vue';
import tmMenubars from '@/tm-vuetify/components/tm-menubars/tm-menubars.vue';
import tmSheet from '@/tm-vuetify/components/tm-sheet/tm-sheet.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmPickers from '@/tm-vuetify/components/tm-pickers/tm-pickers.vue';
import tmPickersView from '@/tm-vuetify/components/tm-pickersView/tm-pickersView.vue';
import tmPickersDate from '@/tm-vuetify/components/tm-pickersDate/tm-pickersDate.vue';
import tmPickersDateView from '@/tm-vuetify/components/tm-pickersDateView/tm-pickersDateView.vue';
import tmPickersCityView from '@/tm-vuetify/components/tm-pickersCityView/tm-pickersCityView.vue';
import tmPickersCity from '@/tm-vuetify/components/tm-pickersCity/tm-pickersCity.vue';
export default {
	components: { tmFullView, tmMenubars, tmSheet, tmButton, tmPickersView, tmPickersCityView, tmPickersCity, tmPickersDate, tmPickers, tmPickersDateView },
	data() {
		return {
			// 名称赋值默认(需要每个值的文本是唯一的不能同名)
			selected: ['可口可乐'],
			// 索引赋值默认选中状态
			selected_1: [1, 1],
			list_1: [
				{
					title: '水果产品',
					id: 1,
					children: [{ title: '苹果' }, { title: '香蕉' }, { title: '可口可乐' }, { title: '新西兰' }, { title: '日本' }]
				},
				{
					title: '房间类型',
					id: 2,
					children: [{ title: '香蕉' }, { title: '可口可乐' }, { title: '新西兰' }, { title: '日本' }]
				},
				{
					title: '批发市场',
					id: 3,
					children: [{ title: '可口可乐' }, { title: '新西兰' }, { title: '日本' }]
				}
			],
			d_3:[],
			showDate:false,
			date: '2020-1-31',
			start_d:'1990-12-31',
			end_d:'',
			showdetail:{
				year: true, //年
				month: true, //月
				day: true, //天
				hour: false, //小时
				min: false, //分
				sec: false //秒
			}
		};
	},
	methods: {
		testchange(e){
			console.log(e);
		},
		test(e) {
			let vt = [];
			e.forEach(item => {
				vt.push(item.index);
			});
			this.selected = vt;
		},
		test_1(e) {
			let vt = [];
			e.forEach(item => {
				vt.push(item.index);
			});
			this.selected_1 = vt;
		},
		dateSe_1(e) {
			// {year: 2021, month: 8, day: 23}
			this.date = e.year + '-' + e.month + '-' + e.day;
		},
		dateSe_2(e) {
			// {hour: 12, min: 44, sec: 0}
			console.log(e);
		},
		dateSe_3(e) {
			console.log(e);
			// ["天津市", "市辖区", "和平区"]
			this.d_3 = e;
		}
	}
};
</script>

<style></style>
